
html,body{
	height:100%;
}
.header{
	box-shadow: 0 0 0 #fff !important;
}
.login_content{
	top: 2.5rem;
	height: 100%;
	min-width: 25rem;
	max-height: 44rem;
	position: relative;
	overflow: hidden;
	background-image: url("/static/img/bg01.jpg") ;
	background-repeat: no-repeat;
	background-size: 100% 101%;
	background-position-y: -.1rem;
	background-color: #3c3c3c;
	z-index: 15;
}

.login_box,.register_box{
	margin:0 auto;
	margin-top: 10%;
	height: 16rem;
	width: 15rem;
	border: 1px solid #e5e4e3;
	box-shadow: 0 0 5px #C3BDBD;
	overflow: hidden;
	background-color: #fff;
}
.register_box{
	margin-top: 0;
}
.login_box_content,.register_box_content{
	width: 90%;
	margin: 0 auto;
	height: 100%;
	overflow: hidden;
}

.login_box_title,.register_box_title{
	margin-top: 1rem;
	font-size: 1rem;
	font-weight: bold;	
	color: #333;
	position: relative;
}
.login_form_box,.register_form_box{
	margin-top: .5rem;
	overflow: hidden;
}
.login_input{
	display: block;
	width: 90%;
	border: none;
	height: 2rem;
	margin: 0 auto;
	outline: none;
	font-size: .8rem;
	color: #696262;
}

.login_input_username{
	border-bottom: 1px solid #d2d3d4;
}

.login_input_box,.register_input_box{
	border: 1px solid #d2d3d4;
}

.login_btn,.register_btn{
	display: block;
	width: 100%;
	margin: 0 auto;
	margin-top: .7rem;
	height: 1.7rem;
	background-color: #E24D46;
	color: #f8f8f8;
	border-radius: 6px;
	border: none;
	font-size: 1.1rem;
	cursor: pointer;
	outline: none;
}

.login_btn:hover{
	background-color: #EA655F;
}
#login_tips,#register_tips{
	font-size: .6rem;
	color: #F44336;
	margin-top: .2rem;
	display: none;
}

.division{
	height: 0;
	width: 100%;
	border-top: 1px solid #d2d3d4;
	margin-top: .5rem;
}
.register_btn{
	margin-top: 1.2rem;
	background-color: #3C3C41;
	height: 2rem;
	border: none;
	font-size: 1rem;
}
.return_login{
	height: 1.2rem;
	border: 1px solid #e5e4e3;
	background-color: #fff;
	margin-top: .15rem;
	outline: none;
	cursor: pointer;
	position: absolute;
	right: 6%;
	top: 3%;
}
.login_footer{
	height: 2.5rem;
	text-align: center;
	min-width: 25rem;
	padding: 1rem;
	font-size: .7rem;
	color: #fff;
	position: relative;
	z-index: 16;
}
.login_footer_wrap>span:last-of-type{
	position: absolute;
	left: .5rem;
}
.register_box{
	transform: rotateY(90deg);
	-webkit-transform: rotateY(90deg);
	-o-transform: rotateY(90deg);
	-ms-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
	
}
.out{
	animation: fadeout .2s forwards;
	-webkit-animation: fadeout .2s forwards;
	-o-animation: fadeout .2s forwards;
	-ms-animation: fadeout .2s forwards;
	-moz-animation: fadeout .2s forwards;
	height: 16rem;
}
@-webkit-keyframes fadeout{
	0%{
		-webkit-transform: rotateY(90deg);
	}
	100%{
		-webkit-transform: rotateY(0deg);
	}
}
@-o-keyframes fadeout{
	0%{
		-o-transform: rotateY(90deg);
	}
	100%{
		-o-transform: rotateY(0deg);
	}
}
@-ms-keyframes fadeout{
	0%{
		-ms-transform: rotateY(90deg);
	}
	100%{
		-ms-transform: rotateY(0deg);
	}
}
@-moz-keyframes fadeout{
	0%{
		-moz-transform: rotateY(90deg);
	}
	100%{
		-moz-transform: rotateY(0deg);
	}
}
.in{
	animation: fadein .2s forwards;
	-webkit-animation: fadein .2s forwards;
	-o-animation: fadein .2s forwards;
	-ms-animation: fadein .2s forwards;
	-moz-animation: fadein .2s forwards;
	height: 0;
}
@-webkit-keyframes fadein{
	0%{
		-webkit-transform: rotateY(0deg);
	}
	100%{
		-webkit-transform: rotateY(90deg);
	}
}
@-o-keyframes fadein{
	0%{
		-o-transform: rotateY(0deg);
	}
	100%{
		-o-transform: rotateY(90deg);
	}
}
@-ms-keyframes fadein{
	0%{
		-ms-transform: rotateY(0deg);
	}
	100%{
		-ms-transform: rotateY(90deg);
	}
}
@-moz-keyframes fadein{
	0%{
		-moz-transform: rotateY(0deg);
	}
	100%{
		-moz-transform: rotateY(90deg);
	}
}